<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:ng2-all</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<p><div style="font-size:48px;font-weight:bold;color:#666;text-align:center;border-bottom:2px solid #ddd;">
《项目实战二》大纲练习
</div></p>
<p><p style="text-align:center;">编写人：游戏学院 1506mwebB班</p></p>
<pre style="background:url(../ng2img/timg.jpg);color:#fff;font-size:18px;line-height:40px;height:300px;">
**讲师：大象**
一组：周梦楠  王强民  陈震
二组：栗搏 邢姗 邓燕 郝天耀
三组：武云斌 孙喜彤 张向向
四组：郑丽君  王洋  陈永辉
</pre>



<h2 id="ng2-">ng2关键概念</h2>
<h3 id="-">装饰器</h3>
<h4 id="-">作用</h4>
<p>装饰器是用来将metadata附加到类上，这样模块就知道该类的具体含义，以及运行方式。</p>
<h4 id="-">装饰器种类</h4>
<pre><code>@Component、@Directive、@Pipe
</code></pre><h3 id="-module-">模块（module）</h3>
<h4 id="-">定义</h4>
<p><strong>模块是一个带有（@ngModel）装饰器的类</strong></p>
<h4 id="-">描述</h4>
<blockquote>
<p>应用都是模块化的，Angular有自己的模块系统。通常app.module.ts定义一个应用的根模块，一个应用应该至少有一个根模块（root module）。对于一个简单的应用来说，一个根模块足矣，但对于一个复杂的应用则可能需要添加特性模块，而且不止一个。</p>
</blockquote>
<h4 id="-">作用</h4>
<p>@NgModule装饰器函数接收的元数据</p>
<pre><code>declarations: 声明模块所拥有的视图类，Angular有三种视图类：component、directive和pipe。
exports: declarations的子集。作用是导出类以便其他模块的组件模板使用。
imports: 导入外部模块的类以便在此模块中声明的模板组件使用。
providers: 服务提供商。模块会将这些服务加入全局服务集，这样在app的任何位置都可以使用加入的服务。
bootstrap: 应用的主视图，包含app的其他视图。只有根模块可以设置这个属性。
</code></pre><p>####　简单根模块例子</p>
<pre><code>import { NgModule } from &#39;@angular/core&#39;;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;

import { AppComponent } from &#39;./app.component&#39;;

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],  //在这里加自己定义的组件、指令或管道
  bootstrap: [ AppComponent ] 
})

export class AppModule{}
</code></pre><h3 id="-component-">组件 (component)</h3>
<h4 id="-">定义</h4>
<p><strong>组件是一个带有@Component装饰器的类</strong></p>
<h3 id="-directive-">指令 (directive)</h3>
<h4 id="-">定义</h4>
<p><strong>指令是一个带有@Directive装饰器的类</strong></p>
<h3 id="-pipe-">管道 (pipe)</h3>
<h4 id="-">定义</h4>
<p><strong>管道是一个带有@Pipe装饰器的类</strong></p>
<h3 id="-">服务 (普通类)</h3>
<h4 id="-">定义</h4>
<p><strong>服务就是一个普通的类</strong></p>
<h3 id="-">数据绑定的基本概念</h3>
<p>angular数据绑定的语法有四种形式，每种形式都有一个方向：</p>
<pre><code>{{ variable }} : 插值表达式。方向是从COMPONENT---&gt;DOM。
[property]=&quot;variable&quot; : 属性绑定。方向同样是从COMPONENT--&gt;DOM。
(event)=&quot;handler&quot; : 事件绑定。方向是DOM--&gt;COMPONENT。
[(ngModel)]=&quot;variable&quot; : 双向数据绑定。方向是双向的 DOM&lt;--&gt;COMPONENT。
</code></pre><h3 id="-component-template-metadata-">组件（Component）、模板（Template）和元数据（MetaData）</h3>
<p>先看一个简单的组件：</p>
<pre><code>// hello.component.ts
import { Component } from &#39;@angular/core&#39;;

@Component({
    selector: &#39;say-hello&#39;,
    templateUrl: &#39;./hello.component.html&#39;,
    styleUrls: [ &#39;./hello.component.css&#39; ]
})

export class HelloComponent{
    name: string = &#39;Angular2&#39;;
    constructor(){}
}
</code></pre><pre><code>&lt;!-- hello.component.html --&gt;
&lt;p class=&quot;hello&quot;&gt;
    hello,&lt;span&gt;{{ name }}&lt;/span&gt;!
&lt;/p&gt;
/* hello.
</code></pre><pre><code>/* hello.component.css */
p{ margin:0; padding:0; font-size:14px; color: #444;}
p span{ font-size: 18px; }
</code></pre><h4 id="-component-">组件（Component）</h4>
<blockquote>
<p>组件的作用是控制页面上的某一块区域，即视图。Angular在类中定义组件的应用逻辑，类又通过属性和方法与视图交互。</p>
<p>上面的代码使用@Component装饰器函数将后面定义的HelloComponent类标记为了一个组件，别忘了先要导入Component装饰器，否则无法使用。@Component装饰器函数接收一个元数据对象，其属性值定义了模板或模板路径、样式或样式路径以及css选择器（即自定义的标签）等内容。</p>
</blockquote>
<h4 id="-template-">模板（Template）</h4>
<blockquote>
<p>观察上面HTML文件的代码，除了标准的HTML标签外，可以看到还有一个Angular自有的取值表达式{{ name }}，这个表达式可以将类中定义的name值取过来显示在页面上。修改name值并保存，页面内容也会相应发生变化。这也是Angular的魅力所在——不用修改DOM就可操控页面内容。</p>
<p>除了使用{{}}以外，还可以使用*ngFor循环 (click) (keyup)事件 [staff]输入属性 [(ngModel)]双向数据绑定等模板语法。</p>
</blockquote>
<h4 id="-">元数据</h4>
<blockquote>
<p>@Component装饰器函数接收的参数就是元数据，元数据的作用是告诉Angular如何处理一个类。比如在父模板中用什么标签调用该组件实例，组件实例如何渲染页面等。</p>
</blockquote>
<p>元数据有如下属性：</p>
<pre><code>selector: 选择器。
template: 模板。值为模板字符串，为了提高可读性和复用性，通常不定义该属性，而是提取为单独的HTML文件。
templateUrl: 模板文件相对路径。即上面说的HTML文件的相对路径。
style: 样式。值为模板字符串组成的数组，为了提高可读性和复用性，通常不定义该属性，而是提取为单独的CSS文件。
styleUrls: 样式文件相对路径数组。即上面说的CSS文件的相对路径所组成的数组。
providers: 服务提供商。同模块中的providers。
</code></pre><h1 id="-01-ionic2">第01单元-认识Ionic2</h1>
<h2 id="-">知识点</h2>
<h3 id="ionic-angular-">ionic和angular区别</h3>
<pre><code>cordova [&#39;kɔ:dəvə] 科尔多瓦
ionic是angular衍生品。
angular好比jquery一样，是单独的JS库，而ionic是对angular的拓展，封装了angular，实现了符合移动端规范的组件
</code></pre><h3 id="ionic-angular-cordova-">ionic/angular和cordova区别</h3>
<pre><code>角色不同：
ionic/angular负责页面实现
cordova负责把实现的页面，包装成原生的应用（apk和ios）
</code></pre><h2 id="-">一、填空题</h2>
<pre><code>1、Angular是一个实现了什么模式的框架?
2、MVVM分别是_________、_________、_________。
3、Angular2和Ionic2的关系是_________。
4、Ionic和cordova的关系是_________。
5、Angular2中模板计算一个表达式或者显示一个数据使用的语法是_________。
6、Angular2指令的前缀是_________。
7、NodeJs自带的包管理器是_________。
8、使用npm安装cordova的命令是_________。
9、npm全局安装的参数是_________。
10、Vue是实现了哪个模式_________。
</code></pre><h2 id="-">二、简答题：</h2>
<pre><code>1、说一下Angular2和Ionic2的关系,Ionic和Cordova的关系


2、简单比较一下Angular2和Vue2这两个框架，并说出他们适用的场景


3、说一下你对js中值类型和引用类型的理解。


4、为什么Vue中的组件的data参数必须是函数
官方文档说明的很准确了，假定存在组件ComponentA，里面定义为
```js
module.exports = {
    props: {
        title: String
    },
    data： {
        test: 1
    }
}
</code></pre><p>在某个Page里面我们定义了如下的模板</p>
<pre><code class="lang-html">&lt;template&gt;
    &lt;div&gt;
        &lt;component-a title=&quot;1&quot;&gt;&lt;/component-a&gt;
        &lt;component-a title=&quot;2&quot;&gt;&lt;/component-a&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<p>When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we still use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.</p>
<pre><code>如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。
用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题
</code></pre><pre><code>js在赋值object对象时，是直接一个相同的内存地址。所以为了每个组件的data独立，采用了这种方式。
</code></pre><p>5、什么是浅拷贝？什么是深拷贝？</p>
<h2 id="-">三、程序分析题</h2>
<p>1、写出如下程序的输出。</p>
<pre><code class="lang-js">var a = 10;
var b = a;
b = 11;
console.log(a);
</code></pre>
<p>2、写出如下程序的输出。结合上一题js说说为什么？</p>
<pre><code class="lang-js">var aJson = {x:10};
var bJson = aJson;
bJson.x = 11;
console.log(aJson.x);
</code></pre>
<p>3、写出如下程序的输出。结合上两个题说说为什么？</p>
<pre><code class="lang-js">var aJson = {x:10};
var bJson = aJson;
bJson = {x: 10};
console.log(aJson.x);
</code></pre>
<h2 id="-">四、技能题</h2>
<p>1、使用Npm在全局安装Ionic,cordova</p>
<p>2、使用Vue加载数据和图片并显示到页面上,只加载第一页的笑话数据即可,接口文档如下：</p>
<p><img src="../ng2img/01_joke_data.png" alt="请求数据"></p>
<h2 id="-">五、技巧训练</h2>
<h3 id="angular-typescript-snippets-for-vs-code">Angular TypeScript Snippets for VS Code</h3>
<pre><code class="lang-js">PS D:\bw\share workspaces\ng2\my-i2-app&gt; ionic cordova platform --help

  ionic cordova platform - Manage Cordova platform targets

    Like running cordova platform directly, but adds default Ionic icons and splash screen resources (during add) and
    provides friendly checks.

  Usage:

    $ ionic cordova platform [&lt;action&gt;] [&lt;platform&gt;] [options]

  Inputs:

    action ................... add, remove, or update a platform; ls, check, or save all project platforms
    platform ................. The platform that you would like to add (android, ios)

  Options:

    --no-resources ........... Do not pregenerate icons and splash screen resources (corresponds to add)

  Examples:

    $ ionic cordova platform
    $ ionic cordova platform add ios
    $ ionic cordova platform add android
    $ ionic cordova platform rm ios
</code></pre>
<pre><code>1.添加Android平台支持

在工程目录下执行 ionic platform add android 命令
项目的路径下就会自动生成platform文件夹，里面有一个android文件夹。
添加Android平台支持后就可以打包apk了
在工程目录下执行 ionic build android 命令
会在 xxx\platforms\android\build\outputs\apk下生成android-debug.apk
这种命令生成的apk是用于调试的。
安装到手机
连接手机或者打开模拟器，在xxx\platforms\android\build\outputs\apk下打开命令窗口执行adb install android-debug.apk就能将apk安装在手机或者模拟器上了。
</code></pre><h2 id="-">课堂知识</h2>
<hr>
<h3 id="-">作业</h3>
<pre><code>作业1：自己去给我出3个变化题，包含连接符+  

作业2：typeof能得到多少总不同结果
</code></pre><h3 id="4-var-sum-15-5-2-typeof-sum-">4. var sum = 15+”5”*2;typeof(sum)的结果是什么</h3>
<blockquote>
<p>除了+有连接作用，其余运算符（-*/%）都正常运算</p>
<pre><code class="lang-js">typeof(+&quot;5&quot;)
console.log(0+&quot;5&quot;)
console.log(0+&quot;5&quot;*5)
</code></pre>
<h3 id="4-div-position-___">4、如果要将一个DIV相对与浏览器视窗进行定位，需要将position设置为___</h3>
<pre><code>fixed相对的是浏览器（顶级元素，html）
其他的定位元素，相对于父级定位元素，如果没有，则相对于body
</code></pre></blockquote>
<h3 id="es6-">ES6语法</h3>
<pre><code>5、ES6中的导出的关键字是____    export                  
6、ES6中导入的关键字是___       import (node中使用require()引入或者导入)
7、ES6的Promise中的三种状态是___、___、___      pending, rejected,resolved
</code></pre><h3 id="-">错题</h3>
<pre><code> 5. vue中生命周期的钩子函数由那些 (错题)
 A、created
 B、beforeMount
 C、update
 D、mounted
</code></pre><h3 id="-">描述不严谨题</h3>
<pre><code>1、Vue实例中所有的计算属性要写在___属性下   
改属性为对象                 
2、Vue实例中所有的方法要写在___属性下  
改属性为对象     
8、Ionic2中的打包成各平台的应用的工具是___
改
Ionic2中，打包成各平台应用的工具是___
</code></pre><h2 id="-11-1-">日考题（11月1日）</h2>
<h3 id="-">单选题</h3>
<pre><code> 1. 检测变量是否是哪种基本类型的关键字是
 A、list    B、extend    C、number    D、typeof    

 2. 下面ajax状态码中表示服务端错误的是什么
 A、100开头的 B、200开头的    C、300开头的    D、500开头的    

 3. 用于检测一个值是否是非数字的方法是
 A、typeof    B、number    C、isnumber    D、isNaN    

 4. var sum = 15+”5”*2;typeof(sum)的结果是什么
 A、float    B、object    C、number    D、string    

 5. 下面那些不是数组的方法    
 A、push    B、pop    C、shift    D、toUpperCase
</code></pre><h3 id="-">多选题</h3>
<pre><code> 1. mvc和mvvm区别有什么
 A、MVC中View里会包含Model信息
 B、在MVC模型里，Model会包含逻辑信息，加大了重量
 C、MVVM它代表Model View View-Model
 D、mvvm速度和优化更快    

 2. angular2比angular1有那些好处
 A、依赖更少
 B、移动化体验更好
 C、性能更好
 D、简单易用    

 3. ionic2中 说法正确的是什么
 A、更强大的模板语法
 B、更高效的开发体验
 C、更友好的页面导航
 D、更强大的CLI    

 4. VUE可以隐藏某些元素使用什么
 A、v-if
 B、v-show
 C、v-hidden
 D、v-text

 5. vue中生命周期的钩子函数由那些
 A、created
 B、beforeMount
 C、update
 D、mounted
</code></pre><h3 id="-">填空题</h3>
<pre><code>1、Vue实例中所有的计算属性要写在___属性下                    
2、Vue实例中所有的方法要写在___属性下                    
3、Angular2使用的开发语言是____                    
4、如果要将一个DIV相对与浏览器视窗进行定位，需要将position设置为___
5、ES6中的导出的关键字是____                    
6、ES6中导入的关键字是___                    
7、ES6的Promise中的三种状态是___、___、___                    
8、Ionic2中的打包成各平台的应用的工具是___
</code></pre><h3 id="-">判断题</h3>
<pre><code>1、Ionic不能将应用打包成Android的APK文件                    
2、Angular2使用ES6作为开发语言
</code></pre><h1 id="-02-ionic-apk-">第02单元-ionic安装和apk打包</h1>
<hr>
<blockquote>
<p>知识迁移：对比学习，学习效率提高5倍</p>
</blockquote>
<h2 id="ionic-angular-vue">ionic安装，对比angular和vue</h2>
<h3 id="step1-set-up-the-development-environment">Step1. Set up the Development Environment</h3>
<pre><code class="lang-js">npm install -g @angular/cli //安装angular cli
npm install -g ionic@latest //安装ionic cli
npm install -g vue-cli      //安装vue 脚手架  
//那react有脚手架吗？安装react呢？
</code></pre>
<h3 id="step2-create-a-new-project">Step2.Create a new project</h3>
<pre><code class="lang-js">vue init webpack my-app //创建vue项目
ng new my-app //创建ng项目
ionic start my-app //创建ionic项目
</code></pre>
<h3 id="step3-serve-the-application">Step3.Serve the application</h3>
<blockquote>
<p>vue启动项目</p>
<pre><code class="lang-js">cd my-app
npm install
npm run dev
</code></pre>
<p>ng启动项目</p>
<pre><code class="lang-js">cd my-app
npm install
ng serve --open
</code></pre>
<p>inoic启动项目</p>
<pre><code class="lang-js">cd my-app
ionic serve
</code></pre>
</blockquote>
<p><img src="../ng2img/ionic_template.jpg" alt="效果图"></p>
<h3 id="step4-edit-your-first-angular-component">Step4.Edit your first Angular component</h3>
<h2 id="apk-cordova-">apk打包,使用cordova技术</h2>
<hr>
<blockquote>
<p>准备工作包括nodejs、cordova、AndroidStudio</p>
</blockquote>
<h3 id="step1-cordova-">Step1、创建一个cordova工程</h3>
<pre><code class="lang-js">cordova create cordovaVue
cd cordovaVue
</code></pre>
<pre><code>config.xml -包含应用相关信息，使用到的插件以及面向的平台
platforms - 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
plugins - 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。
www - 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件
hooks - 包含为个性化应用编译系统所需的脚本
</code></pre><h3 id="step2-">Step2、添加安卓平台</h3>
<pre><code class="lang-js">cordova platform add android --save
</code></pre>
<h3 id="step3-vue-">Step3、在vue项目中生成编译完成的源文件</h3>
<pre><code class="lang-js">npm run build
</code></pre>
<h3 id="step4-www">Step4、替换www</h3>
<blockquote>
<p>将cordova项目中的www文件夹下的内容替换为vue项目中生成的dist文件夹中的内容</p>
</blockquote>
<h3 id="step5-cordova-android-">Step5、在cordova项目中创建Android应用</h3>
<pre><code class="lang-js">cordova build android
</code></pre>
<h3 id="step6-android-">Step6、将手机连接在电脑上，运行该 Android 程序</h3>
<pre><code class="lang-js">cordova run android
</code></pre>
<h3 id="step7-">Step7、其他安装</h3>
<pre><code>1、安装sdk版本16 - 25
2、安装jdk1.8
3、安装node.js和CLI脚手架装
4、安装ant
5、安装androidstudio
</code></pre><h2 id="-">填空题</h2>
<pre><code>1、获得Node版本的命令是__________
2、MVW分别是_________、_________、_________。
3、cnpm和npm的区别是_________。
4、NodeJs全局安装Ionic的命令是_________。
5、Ionic全局安装cordova的命令是_________。
6、为了使cordova正确编译apk文件，需要配置的三个环境变量是_____、_______、________。
7、Ionic创建以tabs作为模板的项目的命令是_________。
8、Ionic创建以tutorial作为模板的项目的命令是_________。
9、运行Ionic项目的命令是_________。
10、ionic项目添加android平台的命令是_________。
</code></pre><h2 id="-">简答题</h2>
<pre><code>1、说一下为何要配置PATH环境变量

2、说一下你对Ionic这个移动端框架的理解

3、当命令行提示”ionic既不是内部命令，也不是外部命令”,该如何解决？

4、Cordova是如何让程序跨平台的？(跨平台的原理)

5、简述从项目创建到生成apk的几个 步骤。
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面两句输出什么？这些代码实现的是什么功能？</p>
<pre><code>function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c instanceof Parent);
console.log(c installof Child);
</code></pre><p>2、下面代码输出什么？请简要描述一下<strong>proto</strong>和prototype的关系。</p>
<pre><code>function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c.__proto__ === Child.prototype);
console.log(c.__proto__ === Parent.prototype);
</code></pre><h2 id="-">技能题</h2>
<p>1.以tutorial为模板，新建一个ionic项目</p>
<p>2.使用Vue加载数据和图片并显示到页面上,当页面滑动到底部时，自动加载下一页数据,接口文档如下：
<img src="../ng2img/01_joke_data.png" alt="请求数据"></p>
<p>3.修改一个tutorial模板创建的程序，当点击页面上的按钮时，弹出HelloWorld</p>
<h2 id="-">课堂知识</h2>
<h3 id="-">作业</h3>
<pre><code>  如何正确判断是数组类型,有多少种方法？

3-填空（人工判卷）    typeof (1+2+3)返回的是___     ,为什么？             
3-填空（人工判卷）    typeof +&quot;23&quot; 返回的是__        ,为什么？                 
3-填空（人工判卷）    typeof 1+&quot;23&quot;返回的是_        ,为什么？                 
3-填空（人工判卷）    typeof 1-&quot;23&quot;返回的是_    ,   为什么？
</code></pre><h3 id="-cordova-apk-_____-_______-________-">为了使cordova正确编译apk文件，需要配置的三个环境变量是<strong>_</strong>、<strong>___</strong>、<strong><em>__</em></strong>。</h3>
<blockquote>
<p>JAVA_HOME PATH ANDROID_HOME</p>
</blockquote>
<h3 id="ionic-tabs-_________-">Ionic创建以tabs作为模板的项目的命令是<strong><strong>_</strong></strong>。</h3>
<pre><code class="lang-js">ionic start demo tabs
</code></pre>
<h3 id="ionic-tutorial-_________-">Ionic创建以tutorial作为模板的项目的命令是<strong><strong>_</strong></strong>。</h3>
<pre><code class="lang-js">ionic start demo tutorial
</code></pre>
<h3 id="-ionic-_________-">运行Ionic项目的命令是<strong><strong>_</strong></strong>。</h3>
<pre><code class="lang-js">ionic serve
</code></pre>
<h3 id="ionic-android-_________-">ionic项目添加android平台的命令是<strong><strong>_</strong></strong>。</h3>
<p>去试试是哪个可能</p>
<pre><code class="lang-js">ionic cordova platform add android --save
ionic platform add android --save
cordova platform add android --save
</code></pre>
<h3 id="-path-">说一下为何要配置PATH环境变量</h3>
<blockquote>
<p>.;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%APPCAN_PATH%;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\Git\cmd;%NVM_HOME%;%NVM_SYMLINK%;%SDK_HOME%\tools;%SDK_HOME%\platform-tools;</p>
</blockquote>
<p>用来寻找可执行命令文件的路径，比如以.exe结尾的文件</p>
<h3 id="-ionic-">当命令行提示”ionic既不是内部命令，也不是外部命令”,该如何解决？</h3>
<blockquote>
<p>配置path环境变量</p>
</blockquote>
<p>听不懂，看不明白，讲了也不清楚：去配</p>
<h3 id="-apk-">简述从项目创建到生成apk的几个 步骤。</h3>
<p>第一步：创建项目  Ionic start my-app
第二步：进入项目 cd my-app
第三步：添加平台（android, ios）  ionic platform add android
第三步：添加平台（android, ios）  ionic platform add ios
第四步：打包     ionic cordova build android</p>
<pre><code class="lang-js">
function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c instanceof Parent);
console.log(c installof Child);
</code></pre>
<pre><code class="lang-js">
function Child(){}
var c = new Child();
console.log(c.__proto__ === Child.prototype);
</code></pre>
<pre><code class="lang-js">function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c.__proto__ === Child.prototype);
console.log(c.__proto__ === Parent.prototype);
</code></pre>
<pre><code class="lang-js">function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c.__proto__ === Child.prototype);
console.log(c.__proto__ === Object.prototype);
</code></pre>
<h3 id="-">知识</h3>
<blockquote>
<p>所有构造函数，都有prototype属性，该属性指向构造函数指向的prototype对象
所有的实力化对象，都有<strong>proto</strong>原型链，该原型链指向的是它的构造函数所指向的原型对象(prototype对象)
<a href="https://jingyan.baidu.com/article/c85b7a6414f2ee003bac95d5.html">https://jingyan.baidu.com/article/c85b7a6414f2ee003bac95d5.html</a></p>
</blockquote>
<h2 id="-11-1-">日考题（11月1日）</h2>
<h3 id="-">单选题</h3>
<pre><code>import如何引入一个模块    
A、import {bootstrap} to &quot;browser&quot;
B、import bootstrap ls &quot;browser&quot;    
C、require {bootstrap} to &quot;browser&quot;
D、import {bootstrap} from &quot;browser&quot;;        


var id = &quot;8&quot;*2;id+=5，id的值是
A、18    B、19    C、20    D、21        

Angular把typescript转换成的javascript的文件名是    
A、./src/index.html    
B、cordova.js    
C、src/app/app.html    
D、build/main.js        

使用let定义变量的时候有什么注意的    
A、只在块级内有效    
B、和var没有区别    
C、定义一个常量    
D、都不对        

为了避免变量提升，可以使用什么定义变量    
A、let    
B、var    
C、const    
D、都不对
</code></pre><h3 id="-">多选题</h3>
<pre><code>2-多选    ionic2中 说法正确的是什么
更强大的模板语法    更高效的开发体验    更友好的页面导航    更强大的CLI    

2-多选    CSS的盒模型由什么组成？
content    border    margin    padding        

2-多选    div+css的布局较table布局有什么优点
易于优化    表现与结构相分离。    页面加载速度更快、结构化清晰、页面显示简洁    改版的时候更方便 只要改css文件    

2-多选    var num = x%3;假设x是一个正整数，则num的值有可能是
    0    1    2    3        

2-多选    angular2优势在那
    依赖更少    移动化体验更好    性能更好    简单易用
</code></pre><h3 id="-">填空题</h3>
<pre><code>3-填空（人工判卷）    typeof (1+2+3)返回的是___                        
3-填空（人工判卷）    typeof +&quot;23&quot; 返回的是__                        
3-填空（人工判卷）    typeof 1+&quot;23&quot;返回的是_                        
3-填空（人工判卷）    typeof 1-&quot;23&quot;返回的是_                        
3-填空（人工判卷）    1===&quot;1&quot;返回的是___                        
3-填空（人工判卷）    数组中可以从尾部进行追加数据的函数是__                        
3-填空（人工判卷）    JS中对数组进行排序的函数是__                        
3-填空（人工判卷）    标准浏览器中可以阻止浏览器默认行为的函数是
</code></pre><h3 id="-">判断题</h3>
<pre><code>0-判断    typeof可以检测一个变量是否是数组类型                        
0-判断    typeof 1+&quot;2&quot;返回的是string
</code></pre><h1 id="-03-ionic-">第03单元-Ionic组件(上)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code> 1. Ionic2中用于给不同平台打包的集成进来的系统叫______。
 2. Ionic2可用于页面间导航的组件是_________。
 3. Ionic2可从屏幕底部滑出，显示确认或取消等选项的组件是_________。
 4. ActionSheetController等Ionic2组件是从哪个包导入的_________。
 5. ActionSheetController实例创建以后必须调用什么方法才能让组件展示在页面上_________。
 6. Ionic用于给用户一些提示消息的通知框的组件是_________。
 7. AlertController创建一个弹出窗调用的方法是_________。
 8. ActionSheetController的每个选项的事件处理回调函数是_________。
 9. 用于在列表项里面展示一个数字的组件是_________。
 10. badges徽章组件的标签是_________。
</code></pre><pre><code>1、Ionic2中用于给不同平台打包的集成进来的系统叫______。
2、Ionic2可用于页面间导航的组件是_________。
3、Ionic2可从屏幕底部滑出，显示确认或取消等选项的组件是_________。
4、ActionSheetController等Ionic2组件是从哪个包导入的_________。
5、ActionSheetController实例创建以后必须调用什么方法才能让组件展示在页面上_________。
6、Ionic用于给用户一些提示消息的通知框的组件是_________。
7、AlertController创建一个弹出窗调用的方法是_________。
8、ActionSheetController的每个选项的事件处理回调函数是_________。
9、用于在列表项里面展示一个数字的组件是_________。
10、badges徽章组件的标签是_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、写一下Ionic2中按钮(Button)的用法，并写出只带外边框按钮，圆角按钮，只显示文字按钮需要添加什么样的样式？


2、说一下如何在button组件里面使用图标组件


3、简述ionic引入actionsheet控件的三个步骤。


4、请说明ionic和angular的关系。


5、请说明MintUi和Vue的关系。
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面程序有什么可以优化的地方？为什么可以这么优化？
<img src="../ng2img/3_01.png" alt="第一张图"></p>
<p>2、下面程序有什么可以优化的地方？为什么可以这么优化？
<img src="../ng2img/3_02.png" alt="第一张图"></p>
<h2 id="-">技能题</h2>
<p>1.使用Vue实现一个购物车功能。
要求：1.可以新增商品;2.可以更改商品数量;3.单价输入后不变;4.总价随商品数量改变而改变</p>
<p>2.为数组添加一个derepeat实例方法，实现数组的去重功能。
例如：var a=[1,2,3,3,2,3,4];
a.derepeat();//a =  [1,2,3,4]</p>
<p>3.实现JS对象的深拷贝(DeepCopy),以避免修改引起的问题。
例如</p>
<pre><code>Var a = {x:10}
Var b = a.deepCopy();
b.x=11;
Console.log(a.x) // 10
</code></pre><h2 id="-">技能训练</h2>
<h2 id="-">课堂知识</h2>
<h3 id="actionsheet-">actionsheet效果实现步骤</h3>
<h4 id="ionic-tutorial-">ionic tutorial 教程</h4>
<pre><code>启动：ionic serve

基于ionic框架，搭建一个组件

//vue 
var Home = Vue.extend({
    template:&#39;&#39;
});

//cli
.vue 文件，包含template,script,style


ionic下的angular

创建一个页面，效果是实现action sheet 
创建一个页面，实现是实现badges
</code></pre><h4 id="-">效果图</h4>
<p><img src="../ng2img/3_actionsheet.gif" alt="演示效果图"></p>
<h4 id="-">捋捋思路</h4>
<h5 id="-xxx-html-xxx-scss-xxx-ts">第一步： 创建组件文件夹，且包含三个文件，分别是xxx.html,xxx.scss,xxx.ts</h5>
<h5 id="-demo-">第二步：拷贝demo，实现效果</h5>
<blockquote>
<p>找到想模仿的组件，actionsheet，去git获得
对应文件内容拷贝过来</p>
</blockquote>
<h5 id="-app-component-ts-app-module-ts-">第三步：在组件(app.component.ts)中使用，在模块(app.module.ts)中配置</h5>
<p>组件步骤：
1、引入</p>
<pre><code>import { MyActionsheet } from &#39;../pages/my-actionsheet/my-actionsheet&#39;;
</code></pre><p>2、配置</p>
<pre><code>{ title: &#39;My Actionsheet&#39;, component: MyActionsheet }
</code></pre><p>模块步骤：
1、引入</p>
<pre><code>import { MyActionsheet } from &#39;../pages/my-actionsheet/my-actionsheet&#39;;
</code></pre><p>declarations[],
entryComponents[]</p>
<h3 id="-">组件注解</h3>
<p>当我们给一个类加上注解的时候， 一个类就变成了 Angular的组件。</p>
<h3 id="-component">@Component</h3>
<p>@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.</p>
<pre><code>@Component({
    selector: &#39;my-app&#39;,
    template: &#39;&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;&#39;
})
</code></pre><p>我们用 Componet 方法来定义一个组件的注解， 这个方法需要引入 angular2/core 才可以使用。</p>
<pre><code>import {Component} from &#39;angular2/core&#39;;
</code></pre><h3 id="-https-segmentfault-com-a-1190000004506135-">初始化引导 [教程][<a href="https://segmentfault.com/a/1190000004506135">https://segmentfault.com/a/1190000004506135</a>]</h3>
<h3 id="-app-main-ts">在 app 文件夹下创建 main.ts</h3>
<pre><code>import {bootstrap}    from &#39;angular2/platform/browser&#39;
import {AppComponent} from &#39;./app.component&#39;
bootstrap(AppComponent);
</code></pre><h2 id="-11-2-">日考题（11月2日）(陈永辉)</h2>
<h3 id="-">单选题</h3>
<pre><code> 1. 使用什么方法可以避免变量提升
 A、let   B、var      C、class    D、interface    
 2. 使用什么方法可以判断浏览器的内核
 A、navigator   B、location      C、pass    D、import        
 3. 关于局部变量说法正确的是什么
 A、无法确定   B、整个文件有效      C、整个程序有效    D、只在自己的方法内有效
 4. let定义的变量由什么要注意的
 A、只在块级内有效   B、和var没有区别      C、定义一个常量    D、都不对    
 5.浏览器 中那个属性包含了浏览器的历史记录
 A、user   B、list      C、history    D、都不对
</code></pre><h3 id="-">多选题</h3>
<pre><code> 1. VueJs可以使用简写的指令是
 A、v-on    
 B、v-bind
 C、v-if
 D、v-model    
 2. export default 抛出的模块接受的时候需要注意什么
 A、是默认抛出
 B、接受的时候是集合
 C、可以使用{}接收
 D、都不对    
 3. ionic2中添加了好多图标，如何正确使用图标
 A、import {bootstrap} to &quot;browser&quot;
 B、&lt;ionIcon name=&quot;heart&quot;&gt;&lt;/ion-icon&gt;;
 C、    &lt;ion-icon name=&quot;heart&quot; isActive=&quot;false&quot;&gt;&lt;/ion-icon&gt;
 D、&lt;ion-icon name=&quot;heart&quot;&gt;&lt;/ion-icon&gt;;    
 4.var num = x%4;假设x是一个正整数，则num的值有可能是
 A、0
 B、1
 C、2
 D、3
 5. js中三种基本对话框是什么
 A、test()
 B、prompt()
 C、confirm()
 D、alert()
</code></pre><h3 id="-">填空题</h3>
<pre><code>1、npm安装组件的全局参数是                        
2、Ionic创建项目的命令是                        
3、命令行运行一个Ionic项目的命令是                        
4、Ionic导入一个组件使用的“导入”关键字是                        
5、Ionic&quot;导出&quot;的关键字是                        
6、Ionic绑定单击事件到clickMe方法的代码是                        
7、Ionic的图标的标签是                        
8、Ionic的徽章的标签是
</code></pre><h3 id="-">判断题</h3>
<pre><code>1、vue中v-if和v-show没有区别，再本质上都可以使用相同方法隐藏元素，                        
2、Action Sheets从设备底部屏幕滑出，可以显示一些选项如确定或取消
</code></pre><h2 id="-1">第三单元（大纲）：模块需要使用的组件1</h2>
<h3 id="action-sheet">action sheet</h3>
<h4 id="alerts">Alerts</h4>
<h4 id="badges">Badges</h4>
<h4 id="button">button</h4>
<h3 id="input-">input组件</h3>
<h4 id="radio">radio</h4>
<h4 id="select">select</h4>
<h3 id="tab-">tab组件</h3>
<h1 id="-04-">第04单元-组件(下)(王强民)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>
1、Tabs(选项卡)组件的标签是___________。
2、icon组件的标签是_________。
3、List（列表）组件的标签是_________。
4、列表项的标签是_________。
5、如果要在列表项中隐藏分割线，需要使用的属性是_________。
6、如果要给列表项添加外边距，可以使用的属性是_________。
7、列表项中用于显示头像的组件是_________。
8、ion-buttons组件中控制按钮位置的属性是_________。
9、Ionic2的grid默认布局是多少列_________。
10、Gird组件的布局方案是什么(em,rem,flex.@mediaquery?)_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、请说明Vue和Angular各自的技术特点和应用场景。


2、Vue中v-if和v-show有什么区别。


3、说一下页面优化的雅虎14条


4、当页面加载很慢的时候，说说排除性能问题的思路。


5、当页面上有很多css和js的时候，说一说优化思路。
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面的run和walk方法会输出什么？为什么？</p>
<p><img src="../ng2img/four-01.png" alt="04单元一"></p>
<p>2、下面的语句输出的是什么？为什么？</p>
<p><img src="../ng2img/four-02.png" alt="04单元二"></p>
<h2 id="-">技能题</h2>
<pre><code>1.创建一个ionic以tabs模板为基础的项目，在页面上显示出列表数据


2.在一个tabs模板的项目中的第二个选项卡，实现一个gird布局


3.使用js模拟高级语言的继承，实现当实例化子类的时候，也可以调用父类的方法。
</code></pre><h2 id="-">技能训练</h2>
<h3 id="-">课堂练习</h3>
<h4 id="-">今日作业</h4>
<pre><code>2.为数组添加一个derepeat实例方法，实现数组的去重功能。 例如：var a=[1,2,3,3,2,3,4]; a.derepeat();//a = [1,2,3,4]
```js
Array.prototype.derepeat=function(){
    var res=[this[0]]
    for(var i=0;i&lt;this.length;i++){
        var repect=false
        for(var j=0;j&lt;res.length;j++){
            if (res[j]==this[i]) {
                repect=true
                break;
            };
        }
        if (!repect) {
            res.push(this[i])
        };
    }

return res
}
alert(a.derepeat())
</code></pre><p>1、Tabs(选项卡)组件的标签是<strong>_ion-tabs<strong>__</strong></strong>。
2、icon组件的标签是<strong>ion-icon<strong>_</strong></strong>。
3、List（列表）组件的标签是<strong><strong>ion-list_</strong></strong>。
4、列表项的标签是<strong>ion-item<strong>_</strong></strong>。
5、如果要在列表项中隐藏分割线，需要使用的属性是_no-lines<strong><em>__</em></strong>。
6、如果要给列表项添加外边距，可以使用的属性是<strong>_inset<em>__</em></strong>。
7、列表项中用于显示头像的组件是<strong>ion-avatar<strong>_</strong></strong>。
8、ion-buttons组件中控制按钮位置的属性是_ion-left<strong><em>__</em></strong>。
9、Ionic2的grid默认布局是多少列<strong>_12<em>__</em></strong>。
10、Gird组件的布局方案是什么(em,rem,flex.@mediaquery?)<strong><em>flex__</em></strong>。</p>
<p>3、说一下页面优化的雅虎14条</p>
<pre><code>1.尽可能减少http请求
2.使用CDN
3.添加Expire/Cache-Control
4.启用Gzip压缩
5.将CSS放在页面最上方
6.将script放在页面最下方
7.避免在CSS中使用Expressions
8.把Javascript和CSS都放到外部文件中
9.减少DNS查询
10.压缩Javascript和CSS
11.避免重定向
12.移除重复的脚本
13.配置实体标签
14.使用AJAX缓存
</code></pre><p>4、当页面加载很慢的时候，说说排除性能问题的思路。</p>
<pre><code>1.减少Http请求
2.精灵图
3.压缩CSS和javascript
4.将css放在页面最上方
5.将script放在最下方
6.使用CDN
7.添加Expire/Cache-control
8.避免在CSS中使用Expressions
9.避免重定向
10.移除重复的脚本
11.简化javascript
12.使ajax缓存
</code></pre><p>5、当页面上有很多css和js的时候，说一说优化思路。
1.将页面中的css和js放到外部引用文件，
2.在将外部文件进行压缩
1、写一下Ionic2中按钮(Button)的用法，并写出只带外边框按钮，圆角按钮，只显示文字按钮需要添加什么样的样式？</p>
<pre><code>clear //只显示文字
outline

使用该属性将使按钮只有边框。
例子:&lt;button ion-button full outline&gt;Outline + Full&lt;/button&gt;  //只带外边框按钮

&lt;button ion-button round&gt;Round Button&lt;/button&gt;   //圆角摁钮
</code></pre><p>2、说一下如何在button组件里面使用图标组件
Icons
在按钮中增加图标的属性,有以下三个值:
icon-left : 图标在文字左边
icon-right ：图标在文字右边
icon-only ：只有图标
3、简述ionic引入actionsheet控件的三个步骤。</p>
<pre><code>第一步：引用
第二步：实例化
第三步：调用
</code></pre><p>1、Ionic2中用于给不同平台打包的集成进来的系统叫<em>cordova<em>__</em></em>。
2、Ionic2可用于页面间导航的组件是<em>ion-nav<strong><em>__</em></strong>。
3、Ionic2可从屏幕底部滑出，显示确认或取消等选项的组件是<strong>avtion sheet<em>__</em></strong></em>。
4、ActionSheetController等Ionic2组件是从哪个包导入的<strong>ionic-angular<strong>_</strong></strong>。
5、ActionSheetController实例创建以后必须调用什么方法才能让组件展示在页面上<strong><strong>present()_</strong></strong>。
6、Ionic用于给用户一些提示消息的通知框的组件是<strong>ToastController<strong>_</strong></strong>。
7、AlertController创建一个弹出窗调用的方法是<strong>_present()<em>__</em></strong>。
8、ActionSheetController的每个选项的事件处理回调函数是<strong>_handler<em>__</em></strong>。
9、用于在列表项里面展示一个数字的组件是<em>ion-badge<strong><em>__</em></strong>。
10、badges徽章组件的标签是<strong>ion-badge<em>__</em></strong></em>。</p>
<p>1.创建一个ionic以tabs模板为基础的项目，在页面上显示出列表数据</p>
<p>2.在一个tabs模板的项目中的第二个选项卡，实现一个gird布局</p>
<p>3.使用js模拟高级语言的继承，实现当实例化子类的时候，也可以调用父类的方法。</p>
<pre><code>
## 日考题（11月3日）王强民

### 单选题
</code></pre><p>1、ioic2中Lists默认情况下没有外部的margin。为了添加margin可以给ion-list添加（）属性
    A.inset    B.margin    C.insets    D.都不对<br>2、ionic2如何列表组件怎么使用
    A.<ion-list></ion-list>    B.<list>    C.<ionList></ion-list>    D.<list><list><br>3、js的浏览器内核存储再什么对象里面<br>    A.navigator    B.location    C.pass    D.import<br>4、Ionic的网格系统基于什么布局<br>    A.box    B.border    C.list    D.flexbox<br>5、ionic2中再网格布局中如何开始新的一行<br>    A.<list>    B.list    C.row    D.<ion-row>    </p>
<pre><code>
### 多选题
</code></pre><p>1、说display属性有哪些？<br>    A.display:block    B.display:inline    C.display:kinndel    D.都不对<br>2、下面布局中那些是相对单位
    A.cm    B.px    C.rem    D.em<br>3、ionic2列表中图标的位置可以使用什么控制
    A.item-left    B.item-right    C.left    D.right<br>4、ionic2中书写图标正确的是什么<br>    A.import {bootstrap} to &quot;browser&quot;    B.<ionIcon name="heart"></ion-icon>;    C.<ion-icon name="heart"isActive="false"></ion-icon>     D.<ion-icon name="heart"></ion-icon>;<br>5、再使用中，如何返回上一页
    A.user    B.history.go(-1)    C.history.back（）    D.都不对        </p>
<pre><code>
### 填空题
</code></pre><p>1、ES5中把JSON字符串转为JSON对象的方法是</p>
<p>2、ES5中把JSON对象序列化(转为字符串)的方法是</p>
<p>3、Ionic列表组件的标签是</p>
<p>4、下面的输出是    var a={x:10};var b= a;b.x=100;console.log(a.x);</p>
<p>5、下面的输出是    var 1=10;var b=a;b=100;console.log(a);</p>
<p>6、&quot;下面的输出是    for(var i=0; i&lt;1;i++) {console.log(i);}  console.log(i);&quot;</p>
<p>7、&quot;下面的输出是    console.log(typeof null);  console.log(typeof undefined);&quot;</p>
<p>8、Vue中可以对全局的状态进行管理的组件是</p>
<pre><code>
### 判断题
</code></pre><p>1、CSS中可以使用clear:both清除浮动</p>
<p>2、ionic2提供的网格布局是基于flex的</p>
<pre><code>



#### 答案
</code></pre><p>1    A
2    A
3    A
4    D
5    D
6    AB
7    CD
8    AB
9    CD
10    BC
11    JSON.parse
12    JSON.stringify
13    ion-list
14    100
15    10
16     0 和 1
17    &quot;object&quot; 和 &quot;undefined&quot;
18    VueX
19    A
20    A</p>
<pre><code>
##第四单元(大纲)：模块需要使用的组件2

###icon组件
####如何使用

###list组件
####如何使用

###toolbar等组件
####如何使用

###其他组件
####FABS
####Grid
####Gestures
####Slides

###ionic图标和主题
####ion-icon
####variable.scss

###iconmoon
####使用iconfont制作svg图标
####使用iconmoon完成字体图标

# 第05单元-主题化 (周梦楠)

## 知识点


## 填空题
</code></pre><p>1、如果要修改ionic2的主题，需要修改的文件是<strong><em>__</em></strong>。
2、改变主题最快的方式是更改哪个属性的值<strong><strong>_</strong></strong>。
3、自定义颜色应该添加在哪里<strong>___</strong>。
4、less声明变量的方式是<strong><em>__</em></strong>。
5、SASS声明变量的方式是<strong><strong>_</strong></strong>。
6、LESS是否可以直接在浏览器使用<strong><strong>_</strong></strong>。
7、禁止文本换行的工具属性是<strong><strong>_</strong></strong>。
8、给元素增加外边距的工具属性是<strong><strong>_</strong></strong>。
9、ion-buttons的工具属性有哪些？<strong><strong>_</strong></strong>。
10、Ionic2默认的平台样式是<strong><strong>_</strong></strong>。</p>
<pre><code>## 简答
1、如何重写ionic自带的md模式下button样式？


![第5单元图片](../ng2img/5_01.png)

2、说一下如何改变一个按钮的样式


3、请分别说出IE,Chrome,Safari,Firefox浏览器的内核和对应css的前缀。


4、什么是JavaScript本地对象、内置对象、宿主对象？


5、列举常见的数组方法，说出他们的常用场景。


## 程序分析题
</code></pre><p>1、下面这句话会输出什么？如果我想要每隔一秒输出一个值该怎么修改代码？</p>
<p>2、下面的错误是如何产生的？如何解决？</p>
<pre><code>
##  技能题
</code></pre><p>1.自定义一个颜色，并在一个按钮上应用这个颜色</p>
<p>2.LocalStorage和SessionStorage有什么区别？</p>
<p>3.使用Vue实现一个二级路由，当点击子路由内某一项时，切换一级路由内容</p>
<pre><code>

## 技能训练


## 课堂知识

### 案例过程总结
</code></pre><p>改端口：8100
搜索文件夹
帮助：ionic serve -h</p>
<pre><code>#### 可选择模板
</code></pre><blockquote>
<p>tabs ............... ionic-angular A starting project with a simple tabbed interface
  blank .............. ionic-angular A blank starter project
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
  super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.
  conference ......... ionic-angular A project that demonstrates a realworld application
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
  aws ................ ionic-angular AWS Mobile Hub Starter
  ```</p>
</blockquote>
<h4 id="-">具体步骤</h4>
<h5 id="-blank-">第一步：搭建框架-(选用blank模板)</h5>
<h5 id="-">第二步：划分结构</h5>
<p>  头部，tab切换，搜索功能，三个组件</p>
<h5 id="-">第三步：选用组件</h5>
<pre><code>头部组件：ion-header
搜索组件：ion-searchbar 
tabs切换： ion-tabs &gt; ion-tab
定义三个组件： tab-dt,tab-rm,tab-ss
</code></pre><h5 id="-">第四步：造数据</h5>
<pre><code>data: Array&lt;{ title: string, content: string, p1: string, p2: string }&gt;;
otherData: Array&lt;{ title: string, content: string, p1: string, p2: string }&gt;;
    // 初始化数据
    initData() {
       this.otherData =  this.data = [{
            title: &quot;facebook如何看待react专利事件?&quot;,
            content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
            p1: &#39;大象赞同了回答&#39;,
            p2: &#39;584赞同，26评论，关注问题&#39;

        },{
            title: &quot;facebook如何看待react专利事件?&quot;,
            content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
            p1: &#39;大象赞同了回答&#39;,
            p2: &#39;584赞同，26评论，关注问题&#39;

        }]
    }
</code></pre><h5 id="-">第五步：实现相关功能</h5>
<pre><code>搜索功能： indexOf
加载更能多: concat
</code></pre><h4 id="-">细节注意：</h4>
<pre><code>    1、tabs切换问题：上不来，tabsPlacement上来
    2、数据显示一行：white-space: normal
    3、组件颜色：color = &quot;danger&quot;
    4、searchbar-ios背景色覆盖
    5、使用组件需要在app.module.ts中注册： declarations，entryComponents
</code></pre><h3 id="-">入门学习</h3>
<h4 id="-vue-">对比vue数据</h4>
<blockquote>
<p>以前写得data,现在angular写在对象里
以前用js语法，现在用了ts，必须指定数据类型
以前初始化数据，放在created钩子函数来做，现在放在构造函数constructor来做
效果有时候组件不满足，自己写样式</p>
</blockquote>
<pre><code>  title: string;
  total: number;
  isShow: boolean;
  // options: {};
  options: Object;
  data: Array&lt;{ title: string, content: string, p1: string, p2: string }&gt;;
</code></pre><h4 id="html-">html代码内容</h4>
<blockquote>
<p>数据循环使用：*ngFor = &quot;let item of data&quot;</p>
</blockquote>
<pre><code>&lt;!-- 内容区域 --&gt;
&lt;ion-content class=&quot;list-content&quot;&gt;
  &lt;!-- 数据列表 --&gt;
  &lt;ion-list no-lines&gt;
    &lt;ion-item *ngFor = &quot;let item of data&quot; class=&quot;data-item&quot;&gt;
       &lt;p&gt;{{item.p1}}&lt;/p&gt;
       &lt;h2&gt;
          {{item.title}}
       &lt;/h2&gt;
       &lt;div class=&quot;content&quot;&gt;
          {{item.content}}
       &lt;/div&gt;
      &lt;p&gt;{{item.p2}}&lt;/p&gt;
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;

&lt;/ion-content&gt;
</code></pre><h4 id="ts-">ts代码内容</h4>
<pre><code>import { Component } from &#39;@angular/core&#39;;
import { NavController } from &#39;ionic-angular&#39;;
@Component({
  selector: &#39;page-home&#39;,
  templateUrl: &#39;home.html&#39;
})
export class HomePage {
  //以前写得data,现在angular卸载这里
  //现在用了ts，必须指定数据类型
  title: string;
  total: number;
  isShow: boolean;
  // options: {};
  options: Object;
  data: Array&lt;{ title: string, content: string, p1: string, p2: string }&gt;;
  // 初始化数据
  initData(){
    this.data = [{
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }, {
      title: &quot;facebook如何看待react专利事件?&quot;,
      content: &quot;大概不久前，从前端发展来看，facebook应该xxx,据了解，大概不久前，从前端发展来看，facebook应该xxx&quot;,
      p1: &#39;大象赞同了回答&#39;,
      p2: &#39;584赞同，26评论，关注问题&#39;

    }]
  }
  //第一配置
  initConfig(){
    // this.title = 1234;
    // this.total = 10000;
    // this.total = parseInt(&quot;fdsafsa&quot;);
    this.options = {

    }

    this.isShow  = false;
  }
  constructor(public navCtrl: NavController) { //created
    this.initConfig();
    this.initData();

  }

}
</code></pre><h1 id="-06-typescript-">第06单元-TypeScript上（陈震）</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>
1、TypeScript全局安装的命令是________。
2、TypeScript语言是面向过程的语言还是面向对象的语言？_________。
3、命令行中将main.ts转为js文件的命令是_________。
4、TypeScript、ES6和JavaScript的关系是什么_________。
5、TypeScript中声明boolean类型的变量如何声明______，如何声明string类型变量______,如何声明number类型变量______。
6、TypeScript中可以接收其他任意类型数据的变量类型是______。
7、TypeScript中如何声明枚举类型_________。
8、TypeScript如果函数没有返回值，则默认返回的类型是______。
9、TypeScript声明只读属性的关键字是_________。
10、TypeScript类的声明的关键字是_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、至少说出六种TypeScript的基本数据类型


2、简单比较一下TypeScript和JavaScript，并说出他们的优缺点。


3、简述如何使用TypeScript的接口和继承


4、简述如何使用JS的原型机制模拟面向对象的继承


5、简述JS中静态方法和实例方法的区别
</code></pre><h2 id="-">程序分析题</h2>
<pre><code>1、超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ,请问这种问题是如何解决？


2、外层一个id为container的div包含四个带有class为item属性的div元素，但是container的高度为0,这是什么原因造成的？这种现象叫做什么？
</code></pre><h2 id="-">技能题</h2>
<p>1、使用命令行在全局环境中安装TypeScript编译器,并且编写文件转化后，使用node在命令行输出”hello world!”;</p>
<p>2、使用ionic实现微信的多选项卡布局，当点击第一个页面时，出现列表页面。</p>
<p>3、(企业真实应用)使用TypeScript类继承实现策略模式(strategyPattern)，要求如下：
<img src="../ng2img/06_01.png" alt="06单元图片"></p>
<h2 id="-">技能训练</h2>
<h2 id="-">准备考试-练习和训练计划</h2>
<h3 id="-">理论复习计划</h3>
<h4 id="-">前面所有的课后练习和考试内容</h4>
<h3 id="-">技能训练计划</h3>
<h4 id="-">搜索功能</h4>
<p>注意：保存数据</p>
<pre><code>filter(function(item){
    需要return返回
}){}
</code></pre><p>需要传入$event</p>
<pre><code>//搜索功能
onInput(event){
    let v = event.target.value;
    let newArr = this.otherData.filter(function(item){
        return item.title.indexOf(v) &gt; -1;
    });
    this.data = newArr;
}
</code></pre><h4 id="-">切换功能</h4>
<p>定义组件
注册组件(声明和注册)
在哪里使用，哪里调用</p>
<h4 id="-">加载更多</h4>
<p>拼接数组</p>
<pre><code>[].concat([],[],[]);
</code></pre><h4 id="-">造数据</h4>
<p>注意：定义数据类型</p>
<h4 id="-axios-">请求接口(axios)</h4>
<p>作业：
微信开发（组为单位）
前面两个作业（翻页）、（Tab切换）</p>
<p>##第六单元（大纲）：TypeScript简介(上)</p>
<h3 id="typescript-javascript-">typeScript和javascript区别</h3>
<h3 id="-typescript">安装typeScript</h3>
<h3 id="ts-js">TS转js</h3>
<h3 id="typescript-">typeScript类型</h3>
<h3 id="typescript-">typeScript接口</h3>
<h1 id="-07-typescript-">第07单元-TypeScript(下)（栗搏）</h1>
<h2 id="-">知识点</h2>
<pre><code>1、Ionic的FABS组件的标签是____。
2、Ionic的可以响应手势操作的组件是_____。
3、TypeScript声明类的关键字是_________。
4、TypeScript声明接口的关键字是_________。
5、TypeScript类继承的关键字是_________。
6、TypeScript类实现接口的关键字是_________。
7、NodeJs自带的包管理器是_________。
8、TypeScript类中默认的访问修饰符是_________。
9、如果一个父类既不想实例中访问invoke方法，也不想让子类继承invoke方法，则这个方法可以使用的访问修饰符是_________。
10、如何对类进行实例化_________。
</code></pre><h2 id="-">填空题</h2>
<pre><code>二、简答题：
1、JavaScript什么样的值是false？


2、JavaScript中null和undefined有什么区别？


3、比较一下TypeScript和JavaScript的类和继承机制
</code></pre><pre><code>4、写出以下JavaScript的输出，并对undefined、null和notdefined这三种类型简单解释一下。
</code></pre><p><img src="../ng2img/07_1.png" alt=""></p>
<pre><code>5、写出以下JavaScript的输出,并说出还有哪些值可以转为false。
</code></pre><p><img src="../ng2img/07_2.png" alt=""></p>
<h2 id="-">简答</h2>
<pre><code>1、下面这句会输出什么？为什么？
</code></pre><p><img src="../ng2img/07_3.png" alt=""></p>
<pre><code>2、下面这句话有没有错误？为什么？
</code></pre><p><img src="../ng2img/07_4.png" alt=""></p>
<h2 id="-">程序分析题</h2>
<pre><code>1、使用面向对象的观点模拟用户登录操作.
要求:
1.创建用户类User,用户类有username和password属性
2.用户类的构造函数里初始化username和password成员属性
3.在类里面写login方法，当用户名是xiaoming密码是123就返回登录成功。
4.导出这个类
5.在另外一个类中，初始化并且进行登录操作
</code></pre><p>2、(企业真实应用)使用TypeScript类继承接口实现策略模式(strategyPattern)，要求如下：
<img src="../ng2img/07_5.png" alt=""></p>
<h2 id="-">技能题</h2>
<h2 id="-">技能训练</h2>
<h1 id="-08-ionic-">第08单元-Ionic组件(下)(邢姗)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular是一个实现了什么模式的框架?________。
2、Vue2是一个实现了什么模式的框架？________。
3、Angular2是使用什么语言进行开发的?_________。
4、Angular导入一个模块使用的语句是______，导入重命名的语句是_____。
5、Angular2中导出一个模块使用的关键字是______,导出的语句是______,导出重命名的语句是__________。
6、全局安装angular脚手架工具的命令是______。
7、NodeJs自带的包管理器是_________。
8、Angular脚手架工具以tutorial模板创建项目的命令是_________。
9、进入NodeJs项目后安装依赖的命令是_________。
10、Angular的三大核心是______、______、______。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、Angular的三大核心是什么？


2、Angular的使用路由的三个步骤是什么？


3、什么是模块？什么是模型？什么是组件？


4、组件的装饰器名字是什么？组件中的selector,templateUrl,template,styles,styleUrls各是什么意思？


5、箭头函数是否可以完全替代function普通函数？这两者有什么区别？
</code></pre><h2 id="-">程序分析题</h2>
<pre><code>1、观察序列:1,1,2,3,5,8,13,21......,写一个程序求第n项的值。


2、分析下面程序的输出？为什么？
</code></pre><p><img src="../ng2img/08_1.png" alt="图片">;</p>
<h2 id="-">技能题</h2>
<pre><code>1.使用Angular2创建一个项目完成以下需求：
</code></pre><p><img src="../ng2img/08_2.jpg" alt="图片08_png">;</p>
<pre><code>2.使用Angular2创建一个项目完成以下需求
</code></pre><p><img src="../ng2img/08_3.jpg" alt="图片08_png">;</p>
<h2 id="-">技能训练</h2>
<h2 id="-">第九单元：如何提取模块</h2>
<h3 id="-">根模块</h3>
<h4 id="appmodule">AppModule</h4>
<h3 id="-">数据渲染</h3>
<h4 id="-">双大括号</h4>
<h4 id="-">变量和表达式</h4>
<h3 id="-">常见指令</h3>
<h4 id="ngif">ngIf</h4>
<h4 id="ngshow">ngShow</h4>
<h4 id="ngfor">ngFor</h4>
<h3 id="-">模块和共享模块</h3>
<h4 id="ngmodule-">NgModule装饰器</h4>
<h1 id="-09-">第09单元-模块和指令(郝天耀)</h1>
<h2 id="-">一、填空题</h2>
<pre><code>1、Angular的默认根模块是_______。
2、Angular的三大核心组成部分是_________、_________、_________。
3、Angular数据渲染使用的语法是_________。
4、Angular根模块的装饰器是_________。
5、Angular2数据循环的指令是______。
6、Angular2事件绑定的语法是_________。
7、Angular2属性绑定的语法是______。
8、Angular2双向绑定的指令是_______。
9、Angular2可以用于显示和隐藏元素的指令是______、______。
10、Angular2模块的装饰器是_________。
</code></pre><h2 id="-">二、简答题：</h2>
<pre><code class="lang-html">1、简单比较一下Vue2和Angular2的事件绑定，属性绑定，双向数据绑定的语法。


2、什么是数据双向绑定？


3、Vue2响应数据变化的原理是什么？


4、什么是TypeScript的存取器?


5、简述TypeScript类和接口的继承和实现机制。
</code></pre>
<h2 id="-">三、技能题</h2>
<pre><code>1.完成一个数据双向绑定的功能，当在输入框输入内容的时候，另一行显示同一样的内容
</code></pre><p><img src="../ng2img/1.png" alt="图片1"></p>
<pre><code>2.(大搜车面试题)
</code></pre><p><img src="../ng2img/2.png" alt="图片1"></p>
<h2 id="-">第十单元（大纲）：模块之间如何通信</h2>
<h3 id="-">组件的建立</h3>
<h4 id="component-">Component装饰器</h4>
<h3 id="-">组件之间的通信</h3>
<h4 id="-input-">@input输入属性</h4>
<h4 id="-output-">@output输出属性</h4>
<h3 id="contentchild-viewchild">contentChild和viewChild</h3>
<h4 id="-contentchild">@ContentChild</h4>
<h4 id="-viewchild">@ViewChild</h4>
<h3 id="-">生命周期和钩子函数</h3>
<h4 id="-">组件和指令生命周期</h4>
<h3 id="-">管道</h3>
<h4 id="-pipe">@Pipe</h4>
<h1 id="-10-">第10单元-组件(邓燕)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular组件装饰器是_______?
2、MVVM分别是_________、_________、_________。
3、Angular2组件中定义元素标签的是______。
4、实现父组件向子组件传值的要使用的装饰器是______。
5、Angular2实现自定义事件的装饰器是_____。
6、Angular2属性绑定的指令或者说语法是______。
7、Angular2事件绑定的指令或者说语法是______。
8、Angular双向数据绑定的指令是_________。
9、Anguar2如何定义一个类______，如何导出一个类______。
10、Angular组件中如何在组件class中声明变量______，如何在组件class中声明函数______。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、简要说明一下JS是如何模拟类继承的


2、说一下Angular2和Vue2但也组件开发模式有什么异同？


3、说出几个angular的内置指令，并说出他们的用途


4、AMD和CMD有什么区别？说出他们各自的代表性框架。


5、Angular组件之间通信有哪几种方式？
</code></pre><h2 id="-">程序分析题</h2>
<pre><code>1、下面程序会输出什么？为什么？
</code></pre><p><img src="../ng2img/10_1.png" alt="图片1"></p>
<pre><code>2、下面四句代码执行后有什么问题？为什么？
</code></pre><p><img src="../ng2img/10_2.png" alt="图片2"></p>
<h2 id="-">技能题</h2>
<pre><code>1.实现一个父子嵌套的组件，当父组件的input输入值的时候，子组件根据相应的输入值，过滤自己table的列表数据.
输入前：
</code></pre><p><img src="../ng2img/10_3.png" alt="图片3"></p>
<pre><code>输入文字后：
</code></pre><p><img src="../ng2img/10_4.png" alt="图片4"></p>
<pre><code>要求：
1.table作为子组件使用
2.使用双向绑定自动过滤
3.使用@input输入绑定或者@ViewChild的方式皆可
</code></pre><h2 id="-">技能训练</h2>
<h2 id="-">日考题  邓燕</h2>
<h3 id="-">填空</h3>
<pre><code>1、Angular中如果要发送ge或者pos请求需要引入的模块是_HttpModule_                        
2、angular中有一个变量名为baidu的变量值为ggoogle,则[src]=&quot;baidu&quot;后，最终渲染的src属性是_google_                        
3、检测JS基本数据类型的语句是_typeof_                        
4、    检测JS复合数据类型的语句是_instanceof                        
5、JS中延时调用的函数是_setTimeout
</code></pre><h3 id="-">判断</h3>
<pre><code>答案 ：A  A  A  A  B 
6、在Angular模板中，可以使用一对中括号将HTML元素或组件的属性绑定到组件模型的某个表达式    对                    
7、Angular程序是使用typeScrip进行开发的        对                
8、NgSwitch指令可以应用在任何HTML元素上，它评估元素的ngSwitch属性值，并根据这个值 决定应用哪些template的内容    对
9、Angular中的ngFor指令可以遍历JSON数组        对                
10、angualr2中没有生命周期和 钩子函数        错
</code></pre><h3 id="-">单选</h3>
<pre><code>11、Angular中的如果要将JSON打印出来可以使用的管道是    
A.  JsonPipe    UpperCasePipe    LowerCasePipe    I18nPipe        
12、Vue中父传子传值说法正确的是    
子组件上需要定义props属性    父组件上需要定义props属性    父组件上需要定义emit    子组件需要定义emit        
13、jQuery触发自定义事件的方法是    
trigger    emit    on    bind        
14、Vue中触发自定义事件的方法是    
$emit    $on    $bind    $delegate        
15、Angular父传子传值说法正确的是    
子组件需要定义input属性    父组件需要定义input属性    父组件需要定义outpu属性    子组件需要定义output属性        
16、Angular使用路由u要引入的模块是    
RouterModule     HttpModule    xmlModule    luyouModule        
17、Angular是从哪个包导入路由模块的?    
@angular/router    @angular/core    @angular/forms    angular        
18、Angular导入路由模块后，必须要将模块声明加入到根模块的哪个属性下    
imports    modules    declearations    forms
</code></pre><h3 id="-">多选</h3>
<pre><code>19 、JS中的普通函数和箭头函数的说法正确的是    
a)箭头函数没有arguments对象    普通函数的this只能在运行时确定    箭头函数的this在定义时确定    普通函数和箭头函数没区别        
20 Angular中属于装饰器的是    
Component    input    output     JsonPipe
</code></pre><h1 id="-11-">第11单元-路由和服务（武云斌）</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular短日期格式的管道是_____?
2、Angular可以进行大写转小写的管道是_________。
3、Angular可以进行小写转大写的管道是_________。
4、Angular可以将JSON对象转为JSON字符串的管道是______。
5、Angular中管道的装饰器是_____，管道类必须实现的接口是_____,管道装饰器和管道接口的引入是从那个模块_______。
6、Angular2指令的前缀是_________。
7、Angular中要使用路由必须引入的模块是_________。
8、Angular中路由在视图上的展示标签是_________，进入路由组件的标签是_______。
9、Angular路由表最基础的两个属性是______。
10、Angular使用哪个方法将路由表传入模块_________。
11、Angular路由表带参数定义的写法是______。
</code></pre><h2 id="-">简答</h2>
<p>1、说一下Vue使用路由的几个步骤。</p>
<p>2、说一下Angular使用路由的几个步骤。</p>
<p>3、说一下angular在普通路由的基础上，如何改造成带参数路由。</p>
<p>4、说一下什么是服务和你对服务的理解。</p>
<p>5、简述什么是依赖注入。</p>
<h2 id="-">程序分析题</h2>
<p>1、以下五个语句的输出是什么？为什么是这个结果？</p>
<p> <img src="../ng2img/11_01.png" alt="图片1"></p>
<p>2、请问下面的这句代码如何优化？为何会产生性能问题？</p>
<h2 id="-">技能题</h2>
<p>1.使用Angular路由实现点击不同的标题的时候，显示不同的内容。如下图所示（图片来自GooglePlay应用商店）
<img src="../ng2img/11_02.png" alt="图片2">
<img src="../ng2img/11_03.png" alt="图片3"></p>
<h2 id="-">技能训练</h2>
<h2 id="-">第十一单元:模块的切换</h2>
<h3 id="-">路由</h3>
<h4 id="-">路由的构建和配置</h4>
<h4 id="-">路由的传参</h4>
<h4 id="-">路由嵌套</h4>
<h3 id="-">服务</h3>
<h4 id="-">定义服务</h4>
<h4 id="-">注入服务</h4>
<h1 id="-12-">第12单元-表单验证（武云斌）</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular使用带参路由需要引用的两个服务是 _____,这两个服务来自与那个模块?________。
2、我们在组件中获取数据一般自爱哪个钩子中写获取数据方法？_______，这个钩子是在哪个接口中声明的？______。
3、Angular路由表最基础的参数是_______，定义嵌套路由需要在父路由的哪个属性下声明_______。
4、Angular中服务的装饰器是______,是从那个模块引入的______。
5、要想将一个服务注入一个组件，需要在组件的哪个属性里加入服务声明______,注入的时候注入进哪个函数里面_____。
6、Angular中响应式表单需要引入的模块是________。
7、TypeScript类中是否可以写静态方法_______，静态方法的声明关键字是_____。
8、TypeScript中接口中方法是否可以写代码______。
9、npm全局安装的参数是_________。
10、Vue是实现了哪个模式_________。
</code></pre><h2 id="-">简答</h2>
<p>1、TypeScript接口既然不可以写代码，那代码应该在哪里写？</p>
<p>2、说说你对类和接口的理解</p>
<p>3、说说你对面向对象和面向过程的理解。</p>
<p>4、说说js中表单验证可以使用的方式。</p>
<p>5、说出至少五个HTML5新增的表单元素</p>
<h2 id="-">程序分析题</h2>
<p>1、以下程序会输出什么？</p>
<p><img src="../ng2img/12_01.png" alt="图片1"></p>
<p>2、写出如下程序的执行结果。？</p>
<p><img src="../ng2img/12_02.png" alt="图片1"></p>
<h2 id="-">技能题</h2>
<p>1.使用表单驱动型验证表单，实现当用户填写数据后，验证通过，当用户不输入数据的时候，不能通过验证.
通过验证如下图所示:</p>
<p><img src="../ng2img/12_03.png" alt="图片3">
不通过验证如下图所示：
<img src="../ng2img/12_04.png" alt="图片4"></p>
<h2 id="-">技能训练</h2>
<h2 id="-">第十二单元:表单验证模块</h2>
<h3 id="-">响应式表单</h3>
<h3 id="-">模板数据和模板文件</h3>
<h3 id="-">动态表单</h3>
<h3 id="-">数据校验</h3>
<h1 id="-13-">第13单元-前后端通信（孙喜彤）</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1.Html5文档的生命方式是________.
2.CSS3中one-of-type选择器是一种什么样的选择器_______。
3.CSS3变形原点的属性是______。
4、CSS3设置圆角的属性是______。
5、说出至少四种HTML5新增的表单标签______、______、______、_____。
6、说出至少四种HTML5新增的结构标签______、______、______、_____。
7、CSS3中火狐浏览器的属性前缀是______。
8、CSS3中Chrome浏览器的属性前缀是______。
9、JS严格模式下x=10这一句会不会出错？_______，为什么_______。
10、ul是块级还是行内元素_______。
</code></pre><h2 id="-">简答</h2>
<p>1、说一下严格模式的开启方法？并说一下和普通模式有什么区别？</p>
<p>2、简单比较一下块级元素和行内元素有什么主要区别？</p>
<p>3、说一下标准浏览器和IE盒子模型的差异</p>
<h2 id="-">程序分析题</h2>
<p>1.使用Angular的Http服务加载数据和图片并显示到页面上,只加载第一页的笑话数据即可,接口文档如下：</p>
<p><img src="../ng2img/13_01.png" alt=""></p>
<h2 id="-">技能题</h2>
<h2 id="-">技能训练</h2>
<h2 id="-">第十三单元(大纲) ：通信模块</h2>
<h3 id="http-">http服务使用</h3>
<h4 id="httpmodule-">HttpModule引入</h4>
<h4 id="http-">Http的使用</h4>
<h3 id="rxjs-">RxJS简介的使用</h3>
<h4 id="reativex-">ReativeX简介</h4>
<h4 id="rxjs-">RxJS使用</h4>
<h1 id="-14-">第14单元-生命周期(张向向)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>一、填空题：
1. 关闭浏览器不会造成数据丢失的HTML5存储类型是____
2. 关闭浏览器会清空数据的HTML5存储类型是______。
3. CSS中id,class,标签选择器的权重分别是多少______。
4. 要使用Http服务必须引入的模块是_______。
5. 说出Angular2的http服务至少两种发送请求的方式______。
6. Angular2在哪个方法中写处理返回数据的方法______。
7. Angular2中的 http服务的返回数据转为json要调用的方法是______。
8. REST规范中常用的四种数据请求方式是______，________，______，______,分别对应的语义化含义是______，________，______，______。
9. jQuery.ajax中表示数据返回类型的参数是______
10. 组件和指令都可以使用的生命周期钩子函数是______，________，______，______。
</code></pre><h2 id="-">简答</h2>
<pre><code>1. 如何实现前后端数据通信
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<ol>
<li>打印Angular2组件中的生命周期的至少四个钩子函数
如下图所示:</li>
</ol>
<p><img src="../ng2img/14_01.png" alt=""></p>
<h2 id="-">技能训练</h2>
<h2 id="-14-">日考题（14单元）张向向</h2>
<h3 id="-">填空题</h3>
<pre><code>1、Angular中Http模块的名字是 HttpModule
2、Angular的Http模块的来源包是 @angular/http                        
3、将Http服务注入构造函数的语句是 constructor(private $http:Http) {}                        
4、Angular中发送get请求后，订阅数据的方法是 this.$http.get().subscribe()                        
5、Angular订阅数据接收后，转成json格式的方法是 data.json()
</code></pre><h3 id="-">判断</h3>
<pre><code>6、nG2通过 http.get() 获取数据                                                      对                
7、RxJS是一个被Angular认可的第三方库，它是异步可观察对象模式的一种实现                  对
8、URI 的协议、主机名 (host) 和端口号 (port) 这几部分的组合被称为同源策略                对
9、Angular 的Jsonp服务不但通过 JSONP 扩展了Http服务，而且限制我们只能用GET请求        对        
10、angular2中不能使用JQ的ajax服务                                                 错
</code></pre><h3 id="-">选择</h3>
<pre><code>11、圆角边框的设置。使用什么属性                       A
    A:border-radius    B:border-top-left     C:border-top    D:.WebM            
12、HTML5对表单自动获取聚焦的属性是什么                   D
    A:list    B:multipe     C:required     D:autofocus                       
13、为了修改背景图片位置，可以使用是，                  C
    A:block     B:background-seiz    C:background-position    D:inline            
14、本地存储中关闭浏览器会消失的数据是什么                 B
    A:lcoalstroage    B:sessionstroage    C:match     D:last                    
15、路由的传参是用什么方法                               D 
    A:在path后面&amp;&amp;id    B:在path后面%id     C:在path后面**id    D:在path后面加/:id            
16、所谓行内元素是什么                                 D
    A:显示数据库记录 B:会自动分行 C:p标签是行内     D:不能够设置元素尺寸，它只能自适应内容        
17、transform怎么设置原点                               C
   A:加-lst-前缀        B:加-moz-前缀     C:transform-origin     D:选择指定 N 个子元            
18、如何清除浮动                                        A
 A:clear:both    B:formvalidate    C:validate    D:formva
</code></pre><h3 id="-">多选</h3>
<pre><code>19、下面那些是浏览器前缀                      AD
     A:ms    B:lo    C:p     D:moz            
20、属于video标签的方法的是                   ABC
    A:play()    B:load()    C:pause()    D:bigImg()
</code></pre><h2 id="-">第十四单元(大纲)：模块数据如何初始化</h2>
<h3 id="-">组件生命周期概述</h3>
<h3 id="-">生命周期顺序</h3>
<h3 id="-">钩子函数</h3>
<h4 id="-">通用钩子</h4>
<h4 id="-">只在组件有效的钩子</h4>
<h3 id="-">国际化</h3>
<h4 id="-">国际化概念</h4>
<h4 id="-">国际化需要在那实现</h4>
<h4 id="-">如何实现</h4>
<h1 id="-15-">第15单元-自动化测试（陈永辉）</h1>
<h2 id="-">填空题</h2>
<pre><code>1. Angular中国际化的工具是_______。
2. Angular可以使用的测试工具是_________、_________、_________。Angular2中定义类的关键字是_________。
3. Ionic和cordova的关系是_________。
4. Angular2中模板计算一个表达式或者显示一个数据使用的语法是_________。
5. Angular2指令的前缀是_________。
6. NodeJs自带的包管理器是_________。
7. 使用npm安装cordova的命令是_________。
8. npm全局安装的参数是_________。
9. Vue是实现了哪个模式_________。
10. Vue2中组件里面data参数是函数还是对象？_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1. 简述一下为什么Vue2组件里面的data必须是个函数？
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<ol>
<li>使用flex布局实现一个div的左右上下居中。如下图所示</li>
</ol>
<p><img src="../ng2img/15_01.png" alt="十五单元"></p>
<p>2.(大搜车面试题)</p>
<p><img src="../ng2img/15_02.png" alt="十五单元"></p>
<h2 id="-">技能训练</h2>
<h2 id="-">日考题（第十五单元）陈永辉</h2>
<h3 id="-">填空题</h3>
<pre><code>1、Angular初始化数据一般需要实现哪个接口 __OnInit
2、Angular请求数据要实现的方法叫做_ngOnInit
3、JS启用ES5的严格模式需要的声明语句是_&quot;use strict&quot;
4、ES6中Promise的三种状态是_、_、_pending、resolved、rejected    
5、Angular中的多语言工具是_i18n
</code></pre><h3 id="-">判断题</h3>
<pre><code>1、Angular组件能用的钩子函数，指令也能用         B
2、HTML中子元素的浮动可能会造成父元素的高度塌陷   A    
3、Angular中一般在ngOnInit()方案获取初始数据    A    
4、cookie存储在服务端，session存储在客户端      B    
5、localstorage存储在客户端，sessionstorage存储在服务端    B
</code></pre><h3 id="-">单选</h3>
<pre><code>11.    为了清理一些逻辑或者变量必须在程序销毁前运行，AG2提供什么钩子函数做这些工作    A
A ngOnDestroy()      B OnChanges()       C pause()   D bigImg()    
12.    为了通过http等获取数据，把这个调用的方法放到那个钩子函数中？ C
A OnChanges()      B onpause()       C ngOnInit()      D ngOnDestroy()        
13.检测到该组件(或指令)的输入属性发生了变化使用什么钩子 A    
A OnChanges()  B onpause()    C ngOnInit()  D ngOnDestroy()    
14.在Angular销毁指令/组件之前调用什么钩子函数    D
A OnChanges() B onpause() C ngOnInit() D ngOnDestroy()    
15.    （）钩子是组件获取初始数据的好地方  A
A ngOnInit() B OnChanges() C ngOnInit() D ngOnDestroy()    
16.下面那些钩子函数只会倍调用一次    C
A block B OnChanges() C ngOnInit() D inline    
17.    该组件消失之前，可用来通知应用程序中其它部分的最后一个时间点用什么钩子（）    D
A ngOnInit() B OnChanges()    C onpause() D ngOnDestroy()    
18.    本地存储中关闭浏览器会消失的数据是什么 B
A lcoalstroage    B sessionstroage C match D last    

### 多选题
</code></pre><ol>
<li>使用ngOnInit()完成什么功能 AB
A 在构造函数之后马上执行复杂的初始化逻辑    B 在Angular设置完输入属性之后，对该组件进行准备 C 当数据发生销毁的时候调用 D 检测到该组件(或指令)的输入属性发生了变化的时候调用</li>
<li>下面那些钩子函数只在组件生命周期内有意义 ABCD
A ngAfterContentInit()    B ngAfterContentChecked() C ngAfterViewInit()D ngAfterViewChecked()<br>```
##第十五单元（大纲） 单元测试
###教学内容
###单元测试
####Karma+Jasmine
####集成测试
####Protractor<h3 id="-">严格模式</h3>
<h4 id="use-static-">use static：</h4>
####jslint检测<h1 id="-16-">第16单元-主页模块(郑丽君)</h1>
</li>
</ol>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<h2 id="-">简答</h2>
<pre><code>1、京东或者淘宝首页主要的功能有哪些？


2、试着描述淘宝的rem页面布局方案？


3、高度塌陷是由什么造成的？这个问题怎么解决？


4、请尽可能详细的说一下，从我们在浏览器地址栏输入一个地址到服务器返回页面，整个过程中发什么什么操作?


5、针对上一题所发生的各个操作，对于页面优化我们应该从哪入手？
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<pre><code>1.需求分析:
随着互联网经济的到来,电子商务成为一种全新的购物方式。它为销售商和用户提供一个有效的沟通平台，
对销售商来说，他们可以将最新最快最热的商品信息即时反映在网络中；而对于消费者来说，
网店则为他们提供了方便快捷省时的服务，强大的搜索功能让消费者随心所欲地找到自己需要的商品。
主页是为展示企业形象和商品的脸面，主页体验的好坏关系到用户是继续使用还是卸载APP(离开网站)。
2.原型设计:
</code></pre><p><img src="../ng2img/sixteen.png" alt="图片"></p>
<pre><code>3.业务需求：
1.用户可以在广告区看到商城推送的轮播广告
2.用户可以在首页直接进入一些常用功能，如充值、缴费、领券等功能
3.首页下滑可以看到系统根据大数据给用户推荐的个性化商品
4.首页下滑看到排行榜商品，对商品按热度排序
4.技术要求:
1.技术框架采用Ionic2进行整体开发
2.接口需要根据接口文档的描述从网络获取
3.要持有用户信息，以便系统可以根据独特浏览习惯进行商品推荐
5.开发要求:
1.时间：4小时
2.代码量：400行
3.参照产品原型图进行第一版设计
6.功能要求:
1.搭建Ionic项目
2.按照功能需求进行主页布局
3.使用后台推荐接口在首页为用户推荐商品
7.性能要求:
1.减少项目体积
2.将图片制作成精灵图
3.在dns轮询和cdn优化间做合适的取舍
4.编写更高效的算法
</code></pre><h2 id="-">技能训练</h2>
<h1 id="-17-">第17单元-分类模块(王洋)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code class="lang-`js">1、选择器 :first_child是一个什么样的选择器？____
2、ID选择器是什么样的?______，类选择器是什么样的?_____。
3、后代选择器是什么样的?______，子选择器是什么样的？______。他俩之间有什么区别？______。
4、Angular用于控制元素的显示和隐藏的两个指令是_____和____，这两个指令有什么区别？_____。(面试题)
5、Npm全局安装的参数是______。
6、Npm将依赖保存到依赖项的参数是_____和____。
7、NodeJs自带的包管理器是_________。
8、npm清空缓存的命令是________。
9、NodeJs项目的配置文件是_____，命令行初始化该文件的命令是_____。
10、Angular是一个什么模式的框架？______。
</code></pre>
<h2 id="-">简答</h2>
<p>1、简述HTML5的存储方式，和它们各自的特点。(面试题)</p>
<p>2、简单比较一下Angular2和Vue2这两个框架，并说出他们适用的场景(面试题)</p>
<p>3、严格模式有什么好处？</p>
<p>4、Vw/vh布局有什么优缺点 ?(面试题)</p>
<p>5、Em布局有什么特点？想对于rem有什么异同？(面试题)</p>
<h2 id="-">程序分析题</h2>
<p>1、下图程序的五句话会输出什么？为什么会是这样的结果？</p>
<p><img src="../ng2img/seventh-01.png" alt="十七单元一"></p>
<p>2、下面的TypeScript代码会输出什么？为什么？</p>
<p><img src="../ng2img/seventh-02.png" alt="十七单元一"></p>
<h2 id="-">技能题</h2>
<p>1、使用angular的ngIf和ngShow指令模拟实现选项卡功能，注意不要用路由和组件实现。如下图所示，当我们点击某一个选项卡的时候，出现不同的页面。</p>
<p><img src="../ng2img/seventh-03.png" alt="十七单元一"></p>
<p><img src="../ng2img/seventh-04.png" alt="十七单元一"></p>
<h2 id="-">技能训练</h2>
<p>##第十七单元（大纲）：搜索和过滤模块</p>
<p>###教学内容</p>
<p>####电商APP搜索模块分析</p>
<p>####业务需求分析</p>
<p>####接口文档</p>
<p>####实现搜索功能</p>
<p>###核心亮点</p>
<p>####多条件过滤</p>
<p>###考核要求</p>
<p>####独立完成搜索模块各个功能点</p>
<p>####独立阅读文档，能够独立进行需求分析和接口调用</p>
<p>####能够实现商品搜索，排序，多条件过滤</p>
<h1 id="-18-">第18单元-购物车模块（王洋）</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code class="lang-`js">1、严格模式下执行x=3.4会输出什么?
2、CSS3 提供了阴影效果的是什么属性____。
3、Angular实现全球化的工具是_____。
4、Angular的MVW框架中M指的是___,V指的是_____,W指的是____。
5、如何属性jQuery获取id为np的href属性____。
6、CSS中更改光标样式的CSS属性是____。
7、CSS3径向渐变的属性是________。
8、如果一个TypeScript函数没有返回值，则默认是什么返回类型？_____。
9、jQuery.ajax方法的dataType参数的意思是____,请列举三个它的可选值____、____、______。
10、css中哪个属性可以控制元素的缩放_____。
</code></pre>
<h2 id="-">简答</h2>
<p>1、跨域问题是B端还是S端造成的?是由该端的什么原因造成的？</p>
<p>2、(接上一题)解决上面那个问题的两种方式是什么？这两种方式具体如何执行？</p>
<p>3、(接上一题)这两种方案的优缺点是什么？</p>
<p>4、什么是块级元素？什么是行内元素?什么是inline-block元素?三者各有什么特点？</p>
<p>5、if(x)这句话作用是什么？会产生什么问题?有没有更好的方式?</p>
<h2 id="-">程序分析题</h2>
<p>1、下面这个函数执行会输出什么语句？</p>
<p><img src="../ng2img/eighth-01.png" alt="十八单元一"></p>
<p>2、（接上一题）加上下面两句话这个 run函数会输出什么？</p>
<p><img src="../ng2img/eighth-02.png" alt="十八单元二"></p>
<p>3、（接上一题）加上下面一句话,run函数会输出什么？</p>
<p><img src="../ng2img/eighth-03.png" alt="十八单元三"></p>
<h2 id="-">技能题</h2>
<p>1、模仿实现淘宝购物车的流程。</p>
<h2 id="-">技能训练</h2>
<h1 id="-19-">第19单元-个人中心模块</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、说出四个HTML5新增的结构元素______、______、______、_____。
2、HTML5中能够提供文本框自动完成功能的元素是______。( 学生工作中反馈)
3、说出六个HTML5新增的表单元素______、____、____、____、____、____。(面试题)
4、设置a标签的链接样式的顺序是_____ 、____ 、____ 、____ 。
5、ng2的生命周期钩子函数中，指令和组件都可以使用的钩子是哪些______ 、____ 、____ 、____。
6、Angular中要使用Http服务，需要导入的模块是______。
7、Angular的三大核心是_____。
8、Angular导入模块重命名的语句是什么______。
9、使用路由功能，需要导入的模块是_______，导入的语句是______。
10、Vue实现的是M-V-VM模式，它们分别是哪三个单词的缩写_____ 、____ 、____。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、比较一下svg和canva两种绘图技术。


2、html和xHtml有什么区别？


3、说说你对html5的认识。


4、说说你对html语义化的了解。 


5、doctype 有什么用处？
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面的两个立即执行函数会输出什么？这样写主要用于哪些场合？</p>
<p><img src="../ng2img/19_01.png" alt="效果布局"></p>
<p>2、下面的代码有什么可以改进的地方？</p>
<p><img src="../ng2img/19_02.png" alt="效果布局"></p>
<p>3、下面的代码实现了一个什么功能？有什么可以改进的地方？</p>
<p><img src="../ng2img/19_03.png" alt="效果布局"></p>
<h2 id="-">技能题</h2>
<p>1、实现一个布局效果，实现一个div的水平和垂直居中。</p>
<p>2、使用php或者NodeJs的Express框架配合bootstrap实现用户注册和登录功能。
注册页面如下：</p>
<p><img src="../ng2img/19_04.png" alt="注册页面"></p>
<hr>
<p>登录界面如下:</p>
<p><img src="../ng2img/19_05.png" alt="登录页面"></p>
<h1 id="-20-">第20单元 总结</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular是一个实现了什么模式的框架?
2、MVVM分别是_________、_________、_________。
3、Angular2和Ionic2的关系是_________。
4、Ionic和cordova的关系是_________。
5、Angular2中模板计算一个表达式或者显示一个数据使用的语法是_________。
6、Angular2指令的前缀是_________。
7、NodeJs自带的包管理器是_________。
8、使用npm安装cordova的命令是_________。
9、npm全局安装的参数是_________。
10、Vue是实现了哪个模式_________。
11、Vue2中组件里面data参数是函数还是对象？_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、说一下Angular2和Ionic2的关系,Ionic和Cordova的关系


2、简单比较一下Angular2和Vue2这两个框架，并说出他们适用的场景
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<p>1.安装NodeJs和Npm</p>
<p>2.使用Npm在全局安装Ionic,cordova</p>
<p>3.使用Vue加载数据和图片并显示到页面上,只加载第一页的笑话数据即可,接口文档如下：</p>
<p><img src="../ng2img/01_joke_data.png" alt="请求数据"></p>
<h2 id="-">技能训练</h2>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>